<template>
  <el-dialog :visible.sync="dialog" width="480px" :close-on-click-modal="false" :before-close="reset">
    <span slot="title" class="dialog-title">{{ title }}</span>
    <div class="dialog_info">
      <el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="昵称" prop="name">
          <el-input v-model="form.name" placeholder="昵称" clearable />
        </el-form-item>
        <el-form-item label="账号" prop="loginName">
          <el-input v-model="form.loginName" placeholder="账号" clearable />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="密码" clearable />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio :label="0">保密</el-radio>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="签名" prop="password">
          <el-input v-model="form.sign" placeholder="签名" clearable />
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="reset">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { add, update } from '@/api/users'
export default {
  name: 'UserDialog',
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      form: {
        id: '',
        loginName: '',
        name: '',
        password: '',
        sex: 0,
        sign: '',
        avatar: ''
      },
      title: '添加',
      rules: {
        // realName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        // phoneNumber: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        // loginName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        // deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
        // roleStrs: [{ required: true, message: '请选择角色', trigger: 'change' }]
      }
    }
  },
  watch: {
    dialog(dialog) {
      const _this = this
      if (dialog) {
        if (Object.keys(_this.row).length === 0) {
          _this.$data.form = _this.$options.data().form
          _this.title = '添加'
        } else {
          for (const key in _this.form) {
            _this.form[key] = _this.row[key]
            _this.title = '修改'
          }
        }
        _this.form.sex = _this.form.sex * 1
        _this.form.status = _this.form.status * 1
        setTimeout(() => {
          _this.$refs.form.clearValidate()
        }, 10)
      }
    }
  },
  methods: {
    reset() {
      this.$emit('reset', 'dialog')
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            update(this.form).then(res => {
              if (res.code * 1 === 200) {
                this.$message({
                  message: `${this.title}成功`,
                  type: 'success',
                  showClose: true
                })
                this.$emit('submit', 'dialog')
              }
            })
            return
          }
          add(this.form).then(res => {
            if (res.code * 1 === 200) {
              this.$message({
                message: `${this.title}成功`,
                type: 'success',
                showClose: true
              })
              this.$emit('submit', 'dialog')
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog_info {
  .el-input,
  .el-select {
    width: 220px;
  }
}
</style>

